<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.serviceTypeId" placeholder="服务类型" class="handle-select mr10" clearable>
					<el-option v-for="item in typeOptions" :value="item.id" :label="item.name"></el-option>
				</el-select>
				<el-select v-model="query.companyId" placeholder="所属公司" class="handle-select mr10" clearable>
					<el-option v-for="item in companyOptions" :value="item.id" :label="item.name"></el-option>
				</el-select>
				<el-select v-model="query.province" placeholder="现居省份" class="handle-select mr10" clearable>
					<el-option v-for="item in provinceData" :value="item.name" :label="item.name"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="姓名" class="handle-input mr10" clearable></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<!--				<el-button type="primary" :icon="Plus">新增</el-button>-->
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="pageLoading">
				<el-table-column prop="id" label="编号" width="90" align="center"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="companyName" label="所属公司" min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="province" label="现居省份" min-width="80" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="nation" label="民族"></el-table-column>
				<el-table-column prop="age" label="年龄"></el-table-column>
				<el-table-column prop="gender" label="性别">
					<template #default="scope">
						<span v-if="scope.row.gender === 1">男</span>
						<span v-if="scope.row.gender === 2">女</span>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="工作状态">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.state === 1">空闲</el-tag>
						<el-tag type="warning" v-if="scope.row.state === 2">繁忙</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="注册时间" :show-overflow-tooltip="true" min-width="120"></el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template #default="scope">
						<el-button text :icon="Document" type="primary" @click="handleDetail(scope.row)" v-permiss="16">
							详情
						</el-button>
						<el-button text :icon="ChatLineRound" type="primary" @click="handleContact(scope.row)" v-if="role == 1">
							咨询
						</el-button>
						<el-button text :icon="Finished" type="primary" @click="handleSelectHouseKeeper(scope.row)" v-if="role == 1">
							签约
						</el-button>
						<el-button text type="warning" key="warning" :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="60%">
			<el-form label-width="70px">
				<el-form-item label="编号">
					<el-input v-model="form.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="期望时薪" prop="hourSalary">
					<el-input-number :min="1" v-model="form.hourSalary"></el-input-number>&nbsp;&nbsp;元
				</el-form-item>
				<el-form-item label="期望日薪" prop="daySalary">
					<el-input-number :min="1" v-model="form.daySalary"></el-input-number>&nbsp;&nbsp;元
				</el-form-item>
				<el-form-item label="期望月薪" prop="monthSalary">
					<el-input-number :min="1" v-model="form.monthSalary"></el-input-number>&nbsp;&nbsp;元
				</el-form-item>
				<el-form-item label="民族" prop="nation">
					<el-input v-model="form.nation"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input-number :min="1" v-model="form.age"></el-input-number>
				</el-form-item>
				<el-form-item label="身高" prop="height">
					<el-input-number :min="1" v-model="form.height"></el-input-number>
				</el-form-item>
				<el-form-item label="婚姻状况" prop="maritalStatus">
					<el-radio-group v-model="form.maritalStatus">
						<el-radio :label="0">未婚</el-radio>
						<el-radio :label="1">已婚</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="服务类型" prop="typeIdList">
					<el-checkbox-group v-model="form.typeIdList">
						<el-checkbox v-for="item in typeOptions" :label="item.id" name="typeIdList">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="工作状态" prop="state">
					<el-radio-group v-model="form.state">
						<el-radio :label="1">空闲</el-radio>
						<el-radio :label="2">繁忙</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="掌握语言" prop="language">
					<el-input v-model="form.language"></el-input>
				</el-form-item>
				<el-form-item label="技能" prop="skill">
					<el-input v-model="form.skill"></el-input>
				</el-form-item>
				<el-form-item label="现居住地">
					<address-cascade-selector @selectedAddress="selectedAddress" ref="editAddressRef"></address-cascade-selector>
					<el-input v-model="form.detail" placeholder="详细地址" style="margin-top: 10px"></el-input>
				</el-form-item>
				<el-form-item label="个人介绍" prop="introduction">
					<el-input type="textarea" rows="5" v-model="form.introduction"></el-input>
				</el-form-item>
				<el-form-item label="图片信息" prop="url">
					<image-uploader @imageChange="handleImageChange" ref="imageUploaderRef"></image-uploader>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<el-dialog title="详情" v-model="detailVisible" width="60%">
			<el-descriptions title="基本信息" :column="2" border>
				<el-descriptions-item label="编号">{{detailData.id}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{detailData.name}}</el-descriptions-item>
				<el-descriptions-item label="所属公司">{{detailData.companyName}}</el-descriptions-item>
				<el-descriptions-item label="期望时/日/月薪(元)">{{detailData.hourSalary}}/{{detailData.daySalary}}/{{detailData.monthSalary}}</el-descriptions-item>
				<el-descriptions-item label="民族">{{detailData.nation}}</el-descriptions-item>
				<el-descriptions-item label="性别">
					<span v-if="detailData.gender === 1">男</span>
					<span v-if="detailData.gender === 2">女</span>
				</el-descriptions-item>
				<el-descriptions-item label="身高">{{detailData.height}}</el-descriptions-item>
				<el-descriptions-item label="年龄">{{detailData.age}}</el-descriptions-item>
				<el-descriptions-item label="服务类型">
					<el-tag v-for="item in detailData.typeList" style="margin-right: 10px">{{item.name}}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="工作状态">
					<el-tag type="success" v-if="detailData.state === 1">空闲</el-tag>
					<el-tag type="warning" v-if="detailData.state === 2">繁忙</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="掌握语言">{{detailData.language}}</el-descriptions-item>
				<el-descriptions-item label="技能">{{detailData.skill}}</el-descriptions-item>
				<el-descriptions-item label="现居地" :span="2">{{detailData.province}}{{detailData.city}}{{detailData.town}}{{detailData.detail}}</el-descriptions-item>
				<el-descriptions-item label="注册时间">{{detailData.createTime}}</el-descriptions-item>
				<el-descriptions-item label="更新时间">{{detailData.updateTime}}</el-descriptions-item>
				<el-descriptions-item label="个人介绍" :span="2">{{detailData.introduction}}</el-descriptions-item>
			</el-descriptions>
			<el-descriptions title="图片信息" direction="vertical" :column="2" border>
				<el-descriptions-item v-for="item in detailData.imageUrlList">
					<el-image style="width: 200px; height: 200px; margin-right: 20px;" fit="fit" :src="item"></el-image>
				</el-descriptions-item>
			</el-descriptions>
			<template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
                </span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,Document,ChatLineRound,Notebook,Finished } from '@element-plus/icons-vue';
import {
	fetchData,
	getCompanyOptions,
	getHouseKeeperApi,
	getHouseKeeperListApi,
	getTypeOptions,
	updateHouseKeeperApi
} from '../api/index';
import address from "../assets/json/address.json";
import {useRouter} from "vue-router";

const query = reactive({
	serviceTypeId: '',
	companyId: '',
	province: '',
	name: '',
	pageNum: 1,
	pageSize: 10
});
const role = ref(localStorage.getItem("role"));
const tableData = ref([]);
const typeOptions = ref([]);
const companyOptions = ref([]);
// 省份数据初始化
const provinceData = ref(address);
const imageList = ref([]);
const pageTotal = ref(0);
const pageLoading = ref(false);
const getServiceTypeOptions = async () => {
	const res = await getTypeOptions({state: 1});
	if (res) {
		typeOptions.value = res.data;
	}
};
getServiceTypeOptions();
const fetchCompanyOptions = async () => {
	const res = await getCompanyOptions({state: 1});
	if (res) {
		companyOptions.value = res.data;
	}
};
fetchCompanyOptions();
// 获取表格数据
const getData = async () => {
	pageLoading.value = true;
	const res = await getHouseKeeperListApi(query);
	if (res) {
		tableData.value = res.data.content;
		pageTotal.value = res.data.count;
	}
	pageLoading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

const detailVisible = ref(false);
const detailData = ref({});
// 查看详情
const handleDetail = async (row: any) => {
	const res = await getHouseKeeperApi(row.id);
	if (res) {
		detailData.value = res.data;
		detailVisible.value = true;
	}
};


// 发起咨询
const handleContact = async (row:any) => {
	let userToken = localStorage.getItem('token');
	console.log(row.managerId);
	window.open("http://localhost:81?userToken=" + userToken +"&managerId=" + row.managerId);
};

// 签约家政员
const router = useRouter();
const handleSelectHouseKeeper = async (row: any) => {
	const p = {housekeeperId: row.id, type: "housekeeper"};
	await router.push({name: 'createOrderForm', params: p});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
	id: null,
	name: '',
	maritalStatus: 0,
	gender: null,
	hourSalary: null,
	daySalary: null,
	monthSalary: null,
	height: null,
	age: null,
	state: 1,
	language: '',
	skill: '',
	introduction: '',
	nation: '',
	province: '',
	city: '',
	town: '',
	detail: '',
	typeIdList: [],
	imageUrlList: []
});
const editAddressRef = ref();
const imageUploaderRef = ref();
const handleEdit = async (index: number, row: any) => {
	const res = await getHouseKeeperApi(row.id);
	const d = res.data;
	Object.keys(form).map((name:any) => form[name] = d[name]);
	editVisible.value = true;
	await nextTick(() => {
		editAddressRef.value.initShow(row.province, row.city, row.town);
		imageUploaderRef.value.onInitImage(form.imageUrlList);
	});
};
const saveEdit = async () => {
	const res = await updateHouseKeeperApi(form);
	if (res) {
		editVisible.value = false;
		ElMessage.success(`修改成功`);
	}
};
const handleImageChange = (images:any) => {
	console.log("handleImageChange", images);
	imageList.value = images;
	form.imageUrlList = [];
	images.forEach((item:any) => {
		form.imageUrlList.push(item.url);
	})
};
const selectedAddress = (address: any) => {
	console.log("selectedAddress", address);
	form.province = address.province;
	form.city = address.city;
	form.town = address.town;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 180px;
}

.handle-input {
	width: 180px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
